<template>
  <div id="Navbar">
    <el-menu :default-active="index" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
        <router-link to="/Home">
          首页 </router-link>
      </el-menu-item>
      <el-menu-item @click="loginshow = true" v-if="!getName">登录</el-menu-item>
      <el-menu-item v-else>{{ getName }}</el-menu-item>
      <el-menu-item @click="Registershow = true">注册</el-menu-item>
      <el-menu-item>退出</el-menu-item>
    </el-menu>
    <el-dialog title="登录" :visible.sync="loginshow" width="20vw" :before-close="handleClose">
      <login />
    </el-dialog>
    <el-dialog title="注册" :visible.sync="Registershow" width="20vw" :before-close="handleClose">
      <Register @resshow="Registershow = $event" />
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import login from './login.vue';
import Register from './Register.vue';
export default {
  components: { login, Register },
  name: "Navbar",
  data() {
    return {
      loginshow: false,
      Registershow: false
    };
  },
  mounted() {
    this.$bus.$on("login", () => {
      this.loginshow = true
    })
  },
  computed: {
    ...mapState(['userinfo']),
    ...mapGetters(['getName']),
    message() {
      return this.userinfo
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
  },
  watch: {
    message(val) {
      if (val.message === '登陆成功') {
        this.$message({
          message: '登陆成功',
          type: 'success'
        })
        this.loginshow = false
      } else {
        this.$message.error(val.message);
      }
    }
  }
};
</script>

<style lang="scss">

</style>
